NextJs SEO(검색 엔진 최적화) 진행하기

간만의 포스팅입니다. 오늘은 NextJs의 MetaData객체를 활용해서 SEO 최적화를 진행해보고자 합니다. 현재 블로그의 SEO 코드를 업데이트하기 전에 한 번 정리를 해보려 합니다. 갑니다.

Metadata

---

SEO를 신경쓰기 위해 가장 먼저 생각이 드는건 메타데이터일 것이다. NextJs에서는 이러한 Metadata를 간편하게 처리할 수 있도록 도와주고 있는데, 구체적으로 알아보자.

코드

export const metadata = {
    title: 'Home-page' ,
    description: 'This is the home-page' ,
    robots: {
       index: true,
       follow: true,
     },
   // etc... 
}

NextJS에서는 위처럼 Metadata라는 객체를 지원한다. 컴포넌트 내부에 위처럼 metadata 객체를 선언하여 설정할 수 있다. metadata객체는 페이지의 head태그에 들어갈 메타데이터의 내용으로, 페이지에 상응하는 metadata를 명시해줌으로써 검색엔진이 좀 더 페이지의 내용을 잘 분석할 수 있도록 도와준다. 위의 코드와 같이 객체를 선언 후, 안에 들어갈 속성들을 입맛에 맞추어 넣으면 된다.

정적페이지와 동적페이지의 메타데이터 설정

---

정적인 페이지와 동적페이지의 메타데이터를 설정하는 법은 다르다. 동적 페이지는 데이터 페칭을 통해 응답 받는 내용과 부합하도록 Metadata를 설정해야한다. 아래 예시를 통해 차이를 살펴보겠다.

정적 페이지

export const metadata = {
    title: 'Home-page' ,
    description: 'This is the home-page'  ,
   // etc... 
}

export default HomePage() {
   // ...
}

처음의 예시와 같다. 정적페이지 컴포넌트에 metadata객체를 선언 후 export한다. 프레임워크의 규칙이기 때문에, 제대로 적용하기 위해서는 metadata라는 이름으로 명시하고 export 해야한다.

동적 페이지

정적인 페이지와 달리, 동적 페이지는 현재 페이지에 상응하는 정보를 동적으로 metadata에 처리해줘야 한다. 아래의 사진은 해당 블로그 서비스의 탭이다. 오른쪽 탭을 보면 현재 열람 중인 포스팅의 제목이 metadata로 처리되어 자동으로 탭의 설명란에 띄워지고 있다.

nextJS에서 이러한 동적인 metadata처리는 위의 방법과 약간 다르다. 동적인 페이지 컴포넌트에서 generateMetadata라는 함수를 통해 설정한다. generateMetadata는 페이지가 렌더링되기 전에 서버에서 실행되어 metadata를 반환한다. 사용방법은 아래 코드를 통해 확인해보겠다.

export async function generateMetadata({
  params
}: {
  params: { postTitle : string }; // pageSlug는 현재 동적 경로의 slug값.  ex) app/posts/[postTitle].tsx
}) {
  const data = await fetchPostData(params.postTitle);

  return MetadataComponent({
    page: `${data.title}`,
    isArticle: true,
    articleSummary: `${data.summary}`,
  });
}

export default MyComponent(){

 // bla bla bla bla...

}

보는 바와 같이 generateMetadata 함수를 사용하는 것은 어렵지 않다. 함수 내부에서 data요청을 하기에 async로 선언한다. 또한 파라미터 값을 받는데, 이 파라미터는 다이나믹 라우팅을 통해 처리한 현재 경로의 slug값이 전달된다. 위의 코드 예시에서는 다이나믹(동적) 라우팅으로 설정한 경로의 [postTitle]이라는 slug값이 함수의 파라미터로 전달되고 있다. 그리고 값을 통해 데이터 요청을 진행하여, 페이지에 상응하는 metadata를 넣어줄 수 있다.

유용한 메타데이터의 속성들

---

이제 메타데이터를 처리하는 방법을 알아보았으니, 메타데이터에 들어가면 좋을 유용한 속성들을 개인적으로 뽑았다.

- Title & Description

return {
  page: "NextJs에서 SEO 처리하기",
  description: "NextJs의 MetaData 객체를 통해 SEO 진행해보기",
};

제목과 설명은 필수다. 사용자들의 클릭을 결정하는 검색 엔진에서 가장 중요한 요소들이며, 페이지의 핵심 내용을 포함하는 속성이다.

- Robots

return {
  robots: {
    index: true, // 검색 엔진에 노출 O
    follow: true, // 페이지 내부 링크를 따라가도록 설정
  },
};

Robots 속성은 검색엔진의 동작에 대한 설정이다. index 속성은 검색엔진이 해당 페이지를 노출시킬지 여부를 설정할 수 있다. 일반적으로 로그인, 마이페이지 등에서 index를 false로 설정한다.

follow 속성은 검색엔진이 해당 페이지의 내부 링크를 크롤링할 지 설정한다. follow가 true라면 검색엔진이 페이지 내부의 링크를 타며 페이지 전체를 보다 잘 파악할 수 있다.

- Canonical URL ( 대표 URL )

return {
  alternates: {
    canonical: "https://example.com/blog/nextjs-seo",
  },
};

Canonical URL은 대표 URL을 설정하는 것이다. 간혹 같은 컨텐츠를 보여줌에도 불구하고 다중 URL에서 접근할 수 있는 경우가 있다. http와 https로 모두 배포되어 있는 경우, 여러 도메인에서 같은 컨텐츠를 의도적으로 제공하는 경우가 있다. 이럴 경우 검색엔진이 각 URL을 중복된 페이지로 간주하고, 임의로 노출 랭킹이 조절될 수 있다. 따라서 Canonical URL을 통해 대표 URL을 설정하여, 의도하는 URL의 가중치를 높이는 것이 중요하다.

- Open Graph (OG)

return {
  openGraph: {
    title: "Next.js로 SEO 처리하기",
    description: "NextJs의 MetaData 객체를 통해 SEO 진행해보기",
    url: "https://example.com",
    images: [
           {
              url: "https://example.com/image.jpg",
              width: 1200,
              height: 630,
              alt: "대표이미지입니다",
            },
         ],
  },
};

Open Graph는 페이스북, X(트위터), 카카오톡 등 SNS 공유 시 썸네일 이미지와 내용을 최적화하는 설정이다. SNS에서도 최적화되어 공유되는 페이지가 필요하다면 설정할 수 있겠다. (귀찮더라도 왠만하면 설정하는게 좋을 것 같다) 코드와 같이 기본적인 속성들을 설정하고, 썸네일 이미지의 크기까지 설정할 수 있다. 예시에서 설정한 1200X630이 가장 권장되는 사이즈라 한다.

마치며

---

이상 NextJs에서 Metadata를 통해 SEO를 처리하는 방법을 알아보았다. 사실 다른 SPA 프레임워크를 사용하는 것 보다 NextJs를 사용하는 것 자체 만으로 SEO를 유리하게 시작할 수 있다. SSR의 방식으로 인해 서버 측에서 어느정도 완성된 페이지의 HTML을 전달하기 때문이다. 따라서 검색엔진도 자바스크립트 코드를 실행하기 전에 미리 페이지의 구조를 파악할 수 있다. 하지만 프레임워크 자체 장점으로 인해 신경써줄 수 있는 부분들을 넘어가는 것은 대충하는 것이다. SEO를 장점으로 NextJs를 채택했다면, 귀찮더라도 각 페이지에 metadata를 꼼꼼히 적용해주는게 기본이고 프로젝트에 대한 애정이라 생각한다..